<!DOCTYPE html>
<html>
	<head>		
  	<title>Couple T-Shirt Designer</title>

  	<link rel="stylesheet" type="text/css" href="./css/sketch.css">  	
    <link rel="stylesheet" type="text/css" href="./css/Color.Picker.Classic.css">
    <link rel="stylesheet" type="text/css" href="./css/iconfont.css">

  	<script src="./js/jquery-2.1.1.min.js"></script>
  	<script src="./TinyColor/tinycolor.js"></script>
    <script src="./HSBRect/HSBRect.js"></script>
  	<script src="./js/fabric.js"></script>
  	<script src="./js/fabric.canvasex.js"></script>

	</head>
	<body>
    <div id="brush-image-shelf">     
      <button id="btn-pencil" title="Pencil" class="geo-button icon-pencil"></button>      
      <button id="btn-brush" title="Circle" class="geo-button icon-brush"></button>
      <button id="btn-spray" title="Glass storm" class="geo-button icon-spray"></button>
    </div>
    <div class="upper-shelf">
      <button id="btn-selector" title="Selector" class="geo-button icon-selector"></button>
      <button id="btn-text" title="Text tool" class="geo-button icon-text"></button>
      <button id="btn-rectangle" title="Rectangle [hit del button to delete]" class="geo-button icon-rect"></button>
      <button id="btn-triangle" title="Triangle [hit del button to delete]" class="geo-button icon-tri"></button>
      <button id="btn-round" title="Round [hit del button to delete]" class="geo-button icon-round"></button>
      <button id="btn-star" title="Star [hit del button to delete]" class="geo-button icon-star"></button>
      <button id="btn-heart" title="Heart [hit del button to delete]" class="geo-button icon-heart"></button>
      <span class="fakeInputContainer" style="position: relative; overflow: hidden; z-index: 0; width: 40px; height: 40px;">
        <button id="btn-open" class="geo-button icon-folder" title="Open file"></button>
        <input type="file" id="upload-button" capture="camera" name="files[]" style="position: absolute; top: 0px; z-index: 1000; font-size: 1000px; text-align: right; width: inherit; height: inherit; cursor: pointer; right: 0px; opacity: 0;">
      </span>     
    </div>
    <div class="upper-shelf">
      <button id="btn-clone" title="Create copy" class="geo-button icon-clone"></button>
      <button id="btn-flip" title="Flip Horizontally" class="geo-button icon-flip"></button>
      <button id="btn-crop" title="Crop" class="geo-button icon-crop"></button>
    </div>
    <div id="shirt-shelf">
      <button id="btn-shirt" title="Shirt view" class="geo-button icon-shirt"></button>
    </div>
    <br/>
  <div id="canvas-area">
    <div id="the-devide"></div>
  </div>
	<div id="right-side">
      <div id="brush-shelf">
        <span>eraser: </span>
        <input id="select-eraser-checkbox" type="checkbox">
        <hr>
        <span>Line width: </span>        
        <input id="brush-size-slider" type="range" min="1" max="100" value="30">
        <br>       
      </div>
      <hr>
      <button id="clear-button">erase all</button>
  </div>
    <script src="./js/Event.js" type="text/javascript"></script> 
    <script src="./js/Color.Picker.Classic.js" type="text/javascript"></script>
    <script src="./js/Color.Space.js" type="text/javascript"></script>
    <script src="./js/fabricjs-painter.js" type="text/javascript"></script>
    <script src="./js/resolutionCal.js" type="text/javascript"></script>    
    <script src="./js/app.js" type="text/javascript"></script>
    
        
	</body>
</html>